<template>
  <div class="container">
    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column width="400" label="文章标题">
          <template #default="{ row }">
            {{ row.title }}
            <i
              @click="show = true"
              v-if="row.videoURL"
              class="el-icon-film"
            ></i>
            <div class="video-claer" v-if="show">
              <div class="video-box">
                <i class="el-icon-circle-close" @click="show = false"></i>
                <video :src="row.videoURL" autoplay></video>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column label="录入时间">
          <template #default="{ row }">
            {{ row.createTime | Day }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="{ row }">
            {{ row.state === 1 ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template #default="{ row }">
            <el-link type="primary" @click="yuLan(row.id)">预览</el-link>
            <el-link type="primary">禁用</el-link>
            <el-link type="primary">修改</el-link>
            <el-link type="primary">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="预览文章"
        :visible="dialogVisible"
        width="80%"
        @close="handleClose"
      >
        <div v-html="add"></div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/articles'
export default {
  data () {
    return {
      tableData: [],
      page: {
        page: 1,
        pagesize: 10
      },
      dialogVisible: false,
      show: false,
      add: ''
    }
  },
  mounted () {
    this.hGetList()
  },
  methods: {
    async hGetList () {
      const res = await list(this.page)
      this.tableData = res.data.items
    },
    handleClose () {
      this.dialogVisible = false
      this.add = ''
    },
    yuLan (id) {
      this.tableData.forEach((itm) => {
        if (itm.id === id) {
          this.add = itm.articleBody
        }
      })
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 15px;
}
.el-icon-film {
  font-size: 18px;
  color: blue;
  vertical-align: text-bottom;
}
.video-claer {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.05);
  z-index: 999999;
  .video-box {
    width: 680px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    video {
      width: 100%;
      height: 100%;
    }
  }
  .el-icon-circle-close {
    font-size: 50px;
    position: absolute;
    left: 46%;
    top: -50px;
    &:hover {
      color: rgb(53, 248, 70);
    }
  }
}
</style>
